<template>
    <div class="Fm">
        <div class="main">
            <DialogSC :data='[ishowDislog]' 
                @dislogScSoon = 'dislogScSoon' @fund='fund'>
                <span name='title' slot="title">收藏</span>
            </DialogSC>
            <DialogMr :data='[isShowFund,type]' 
                 @fund='fund'>
                <span name='title' slot="title">创建歌单</span>
            </DialogMr>
            <DialogFx :fxList='fxList' 
                 @FxSoon='FxSoon'>
                <span name='title' slot="title">分享到</span>
            </DialogFx>
            <div class="left"  ref="delet">
                <div class="hb" ></div>
                <div>
                    <span class="iconfont"></span>
                </div>
                <div class="otherIcon ">
                    <div  v-show="isSc"><span class="iconfont" @click="isSc=!isSc">&#xeca2;</span></div>
                    <div  v-show="!isSc"><span class="iconfont activIcon" @click="isSc=!isSc">&#xeca1;</span></div>
                    <div><span @click="delet($event)" class="iconfont">&#xe718;</span></div>
                    <div><span class="iconfont">&#xe611;</span></div>
                    <div><span  @click="other($event)" class="iconfont">&#xf0141;</span></div>
                    
                </div>
                <div class="deletList" v-show="isDlete" :style="{top:dleteActive.top+2+'px',left:dleteActive.left+'px',position: 'absolute'}" >
                <!-- <div class="deletList" v-show="isDlete" > -->
                
                       <ul>
                             <li @click="isDlete=!isDlete"><span>推荐重复</span></li>
                             <li @click="isDlete=!isDlete"><span>推荐不感兴趣</span></li>
                             <li @click="isDlete=!isDlete"><span>屏蔽歌手：白夜</span></li>
                       </ul>
                </div>
                <div class="deletList others" v-show="isOther" :style="{top:OtherActive.top+2+'px',left:OtherActive.left+'px',position: 'absolute'}" >
                <!-- <div class="deletList" v-show="isDlete" > -->
                
                        <ul>
                        <li  @click="showSc()"><span class="iconfont">&#xe727;</span><span >收藏（Ctrl+s）</span></li>
                        <li  @click="showFx()"><span class="iconfont">&#xe8b0;</span><span >分享...</span></li>
                        <li  @click="isOther=!isOther"><span class="iconfont">&#xf010b;</span><span>复制链接</span></li>
                        <li  @click="isOther=!isOther"><span class="iconfont">&#xe855;</span><span >下载（L）</span></li>
                        <li  @click="isOther=!isOther"><span class="iconfont">&#xea82;</span><span >跳转到垃圾桶列表</span></li>
                        </ul>
                </div>
            </div>
            <div class="right">
                <div class="bigTitle">
                    <span>此生不换</span>
                    <span>标准音质</span>
                </div>
                <span>
                    电视剧《仙剑奇侠传三》插曲
                </span>
                <div class="singer-xq">
                    <div><span>专辑：</span><span>此生不换</span></div>
                    <div><span>歌手：</span><span>青鸟飞鱼</span></div>
                </div>
                <div class="singWord">
                    <span>作曲：张三</span>
                    <span>作曲：闻震</span>
                    <span>时光穿梭不断 流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>刻骨的变迁 不是遥远</span>
                    <span>时光穿梭不断 流转在从前 流转在从前流转在从前流转在从前</span>
                    <span>刻骨的变迁 不是遥远</span>
                </div>
            </div>
        </div>
        <div class="pl">
            <div class="title">
                <span>评论</span>
                <span>（已有70777条评论）</span>
            </div>
            <div class="plEras">
                <!-- <textarea name="" id="" cols="30" rows="3"></textarea> -->
                <span class="iconfont"></span>
                <div>
                    <span class="iconfont"></span>
                    <span class="iconfont"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import DialogSC from './slotDislogSc.vue'
import DialogMr from './slotDislogMr.vue'
import DialogFx from './slotDislogFx.vue'
export default {
    data() {
        return {
            isSc:false,
            //显示删除菜单
            isDlete:false,
            isOther:false,
            dleteActive:{
                top:Number,
                left:Number,
            },
            OtherActive:{
                 top:Number,
                left:Number,
            },
            ishowDislog:false,
            //展示新建歌单
            isShowFund:false,
            type:'fund',
            fxList:[
                {
                    isShowFx:false,
                    type:'fx',
                }
            ]
        }
    },
    components:{
        DialogSC,DialogMr,DialogFx
    },
    watch:{
    isDlete(newValue,oldValue){
        if (newValue==true) {
            this.isOther=false
            //  console.log(this.isOther)

        }
    },
     isOther(newValue,oldValue){
        if (newValue==true) {
            this.isDlete=false
            //  console.log(this.isDlete)

        }
    }

},
    mounted(){
        if (this.isDlete==true) {
            this.isOther=false
             console.log(this.isOther)

        }else{
            if(this.isOther==true){
             this.isDlete=false
             console.log(this.isDlete)
            }
        }
    },
    methods: {
         showSc(){
            this.isOther=!this.isOther
            this.ishowDislog = true
        },
        showFx(){
            this.isOther=!this.isOther
            this.fxList[0].isShowFx = true
          
        },
        //接收分享子组件
        FxSoon(value){
            this.fxList[0].isShowFx = value
         },
        //接收转发子组件传过来的内容
        dislogScSoon(value){
            this.ishowDislog = value
        },
        //接收子组件新建
        fund(value){
            this.isShowFund = value
            // console.log(this.isShowFund)
        },
        delet(e){
            //父级距离 注意getBoundingClientRect().top 和e.y是当前页面到左上角距离
            //
            this.isDlete = !this.isDlete
            this.dleteActive.left = e.x-this.$refs.delet.getBoundingClientRect().left
            //当前高度加滚动条高度为实际高度 父级实际高度减去鼠标实际高度得到父级与鼠标的相对位置
            this.dleteActive.top =(document.documentElement.scrollTop+e.y)-(document.documentElement.scrollTop+this.$refs.delet.getBoundingClientRect().top )//获取鼠标的X坐标（鼠标与屏幕左侧的距离，单位为px） //获取鼠标的Y坐标（鼠标与屏幕顶部的距离，单位为px）
     
        },
        other(e){
             this.isOther = !this.isOther
            this.OtherActive.left = e.x-this.$refs.delet.getBoundingClientRect().left
            this.OtherActive.top =(document.documentElement.scrollTop+e.y)-(document.documentElement.scrollTop+this.$refs.delet.getBoundingClientRect().top )
        }
    },
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    div,span,ul,li,img{
    font-size: 0;
    // 用户不可选中文本
      user-select: none;
}
.Fm{
    .main{
        width: 830px;
        margin: 0 auto;
            display: flex;

        .left{
            width: 50%;
            margin: 0 auto;
            display: block;
            position: relative;
        .deletList{
            width: fit-content !important;
            padding: 3px;
            border: 1px solid rgb(217, 217, 217);
            position: absolute;
            z-index: 99;
             background: #ffffff;
            box-shadow: #f6f6f6 0px 0px 3px 3px;
            ul{
                li{
                     padding: 12px 50px;
                    display: flex;
                    align-items: center;
                }
                li:hover{
                background: #F5F5F6;
            }
            }
            span{
                font-size: 15px;
                display: block;
                
                
            }
            span:hover{
                background: #F5F5F6;
            }
        }
        .others{
            ul{
                li{
                    padding: 12px 20px !important;
                    span:first-child{
                        font-size: 26px;
                        padding:0px !important;
                        color: #666666;
                        margin-right: 10px;
                    }
                }
            }
        }   
        .hb{
            margin-top: 42px;
            background-image: url(../../public/homeImg/hb.jpg);
             background-repeat:no-repeat;
             background-size: 100%;
            width: 370px;
            height: 370px;
        }
        .otherIcon{
            display: flex;
            width: 370px;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            margin-top: 40px;
            div{
                width: 25%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                .activIcon{
                    color: #EC4141;
                }
                span{
                  
                    cursor: pointer;
                     border-radius: 50%;
                 border: 1px solid #E1E1E1;
                padding: 9px;
                font-weight: 0;
                font-size: 30px;
                color: #666666;
                
            }
            }
            
        }
    }
    .right{
        width: 50%;
        .bigTitle{
            span:first-child{
                font-size: 26px;
            }
            span:last-child{
                margin-left: 12px;
                font-size: 14px;
                color: #ef7979;
                border: 1px solid #ef7979;
                padding: 0 2px;
                border-radius: 3px;
                cursor: pointer;
            }
            span:last-child:hover{
                color: #F06767;
            }
        }
        .singer-xq{
            display: flex;
            div{
                width: 50%;
                margin-top: 20px;
                span{
                    color: #666;
                    font-size: 16px;
                }
                span:last-child{
                    color: #527FB0;
                }
            }
        }

        .singWord{
            padding: 0 70px 0 0;
            height: 440px;
            overflow-y: scroll;
            box-sizing: border-box;
            // box-shadow:inset 0px 20px 10px 5px white,inset 0px -20px 10px 5px white;
            margin-top: 20px;
            -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 1) 10%, #ffffff 15%, #ffffff 75%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0.3) 100%);
            span{
                display: block;
                font-size: 18px;
                color: #999999;
                font-weight: 200px;
                margin: 10px 0;
            }

        }
        .singWord::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;
        border-right: 1px solid #F3F3F3;
    }
       .singWord::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #E1E1E1;
    width: 10px;
    height: 30px !important;
}   

    }
    }
}
</style>